<script setup lang="ts">
import type { BannerItem } from "@/types/home";
import { ref } from 'vue';

// 接收参数
defineProps<{ bannerList: BannerItem[] }>();

// 当前激活轮播图下标
const activeIndex = ref<number>(0);
const onBannerChange: UniHelper.SwiperOnChange = (e) => {
    activeIndex.value = e.detail.current;
};
</script>

<template>
    <view class="carousel">
        <swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" @change="onBannerChange">
            <swiper-item v-for="item in bannerList" :key="item.id">
                <navigator :url="item.hrefUrl" hover-class="none" class="navigator">
                    <image mode="aspectFill" class="image" :src="item.imgUrl" />
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
            <text class="dot" v-for="(item, index) in bannerList" :key="item.id"
                :class="{ active: index === activeIndex }"></text>
        </view>
    </view>
</template>

<style scoped lang="scss">
/* 轮播图 */
.carousel {
    width: 100%;
    aspect-ratio: 1240/500;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;

    .swiper {
        height: 100%;
    }

    .indicator {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 16rpx;
        display: flex;
        justify-content: center;

        .dot {
            width: 30rpx;
            height: 6rpx;
            margin: 0 8rpx;
            border-radius: 6rpx;
            background-color: rgba(255, 255, 255, 0.4);
        }

        .active {
            background-color: #fff;
        }
    }

    .navigator,
    .image {
        width: 100%;
        height: 100%;
    }
}
</style>